<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>  

<link rel="stylesheet" href="../../css/login/login.css">
</head>
<body>
<div class="login_port">
    <h1>轻聘</h1><span>&nbsp|&nbsp求职者端</span>
</div>
                
<div id="login-box">
    <div class="login_method">
        <button type="button" class="current">密码登录</button>
        <button type="button">验证码登录</button>
    </div>	
    <div class="form" style="display: block;">
        <div class="item">
            <i class="username" style="font-size:24px" style="position:relative;;"></i>
            <img src="../../imgs/username.jfif" alt=""> 
            <input type="text" placeholder="手机号">		   
        </div>
        <div class="item">
            <i class="password" style="font-size:24px"></i>
            <img src="../../imgs/password.png" alt=""> 
            <input type="text" placeholder="密码">		   
        </div>
        <div class="login-button">
            <a href="../index.html"><button type="submit">登录</button></a>
        </div>
        
    </div>
    <div class="form">
        <div class="item">
            <i class="username" style="font-size:24px" style="position:relative;;"></i>
            <img src="../../imgs/username.jfif" alt=""> 
            <input type="text" placeholder="手机号">		   
        </div>
        <div class="item">
            <i class="password" style="font-size:24px"></i>
            <img src="../../imgs/verification_code.jfif" alt=""> 
            <input type="text" placeholder="输入验证码">	
            <button>获取验证码</button>	   
        </div>
        <div class="login-button">
            <a href="../index.html"><button type="submit">登录</button></a>
        </div>
        
    </div>

    
    
    <div class="regist"><span>没有轻聘账号|</span><a href="../register/register.html">立即注册</a></div>
    <div class="protocol">
    <p><input type="checkbox">同意BOSS直聘《用户协议》 《个人信息保护政策》</p>
    </div>
</div>
<script>
   window.onload=function () {
        let buttons = document.getElementsByClassName('login_method')[0].getElementsByTagName('button');
        // console.log(buttons);
        let forms = document.getElementsByClassName('form');
        // console.log(forms);
       for(let i=0;i<buttons.length;i++){
        let button=buttons[i];
        //console.log(button)
            button.id=i;
            // console.log(button.id);
             // 设置每个button标签的onclick事件
             button.onclick = function(){
                 // 清除所有标签的css设置，隐藏dom标签
                 for(let j=0;j<forms.length;j++){
                     buttons[j].className=" ";
                     forms[j].style.display="none";
                 }
                 // 设置当前标签样式及当前标签下的所有dom标签可见
                 this.className='current';
                // 当前div可见
                forms[this.id].style.display='block';
             }
       }
    }


</script>
</body>
</html>
